<html lang="en"><head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="stylesheet" type="text/css" href="../scratch/newcss.css" />
    <link href="../css/bootstrap.min.css" rel="stylesheet">   
    <script src="../js/jquery.min.js"></script>
    <link rel="stylesheet" 
    href="../css/jquery.dataTables.min.css">
    <script type="text/javascript" 
    src="../js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" 
    src="../js/bootstrap.min.js"></script>
    
    <script src="../js/mostrar.js"></script>


    <!-- Bootstrap core CSS -->
    <link href="../css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="../navbar.css" rel="stylesheet">

  </head>

  <body>
    <div class="container">

      <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
          <div class="navbar-header">
              <a href="../Inicio/index.html">
                <img src="../images/logo2.png" alt="als" class="img-circle"  width='100' height='100' style='margin:0em;'>
                 <!--<li><a href="../navbar-static-top/" >--> 
                 <img src="../images/letras.png" alt="als"  width='500' height='100' style='margin:0em;'>
              </a>
          </div>
          
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
              <li class="active"><a href="../acercade.html">Acerca de</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </nav>
      <!-- Main component for a primary marketing message or call to action -->
     
      <div  class="jumbotron" style="background: rgba(255,255,255,0.5);">
          
           <div class="row"> 
               
               <div class="col-md-3">
                    <input id="botonVerde" type="button" value="Digestivo" name="digestivo"  onclick="mostrarDialogoContenido(name)"/>
                    <br>
                    <br>
                    <input id="botonVerde" type="button" value="Circulatorio" name="circulatorio" onclick="mostrarDialogoContenido(name)"/>
                    <br>
                    <br>
                    <input id="botonVerde" type="button" value="Respiratorio" name="respiratorio" onclick="mostrarDialogoContenido(name)"/>
                    <br>
                    <br>
                    <input id="botonVerde" type="button" value="Urinario" name="urinario" onclick="mostrarDialogoContenido(name)"/>
                    <br>
                    <br>
                    <input id="botonVerde" type="button" value="Óseo" name="esqueleto" onclick="mostrarDialogoContenido(name)"/>
                    <br>
                    <br>
                    <input id="botonVerde" type="button" value="Nervioso" name="nervioso" onclick="mostrarDialogoContenido(name)"/>
                    <br>
                    <br>
                    <input id="botonVerde" type="button" value="Endocrino" name="endocrino" onclick="mostrarDialogoContenido(name)"/>
                    <br>
                    <br>
                    <br>                    
                    <br>
                    <input id="botonVerde" value="Volver" style="background:green" onclick="location.href='../Inicio/index.html'" />
               
               </div>
               <div class="col-md-6">
                   
                    <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
                        <thead style="background-color: #35b128; color: white;">
                         <tr>
                             <th>Cómo se ve</th>
                             <th>Concepto</th>
                         </tr>
                     </thead>

                     <tbody>
                         <tr>
                             <td><img src="../images/circulatorio/arteria.jpg" alt="" style="width: 300px; height: 300px;"></td>
                             <td><strong>Arteria <br></strong>Es cada uno de los vasos que llevan la sangre oxigenada desde el corazón 
                                 hacia las demás partes del cuerpo. Nacen de un ventrículos, sus paredes son muy resistentes y elásticas.</td>
                         </tr>
                         <tr>
                             <td><img src="../images/circulatorio/corazon.jpg" alt="" style="width: 300px; height: 300px;"></td>
                             <td><strong>Corazón <br></strong> Es un músculo hueco y piramidal situado en la cavidad torácica. 
                                 Funciona como una bomba aspirante e impelente, impulsando la sangre a todo el cuerpo.</td>
                         </tr> 
                         <tr>
                             <td><img src="../images/circulatorio/vena.jpg" alt="" style="width: 300px; height: 300px;"></td>
                             <td><strong>Venas <br></strong>Es un vaso sanguíneo que conduce la sangre desde los capilares hasta el corazón. 
                                 Se caracterizan porque contienen sangre desoxigenada y porque transportan dióxido de carbono y desechos metabólicos 
                                 procedentes de los tejidos. Sin embargo, hay venas que contienen sangre rica en oxígeno.</td>
                         </tr>
                     </tbody>
                 </table>
                   
               </div>  
           <canvas width="150" height="215" id="canvass" style="position: absolute; top: 370px; left: 1115px;"></canvas>   
            </div>
          
          
          
           <div id="burbujaTexto" style=" width: 200px; height: 200px; position: absolute; top: 300px; left: 1025px; display: block;">
              <img id="imgen" src="../imagenesMascota/burbuja2.png"> 
           </div> 
        
          </div>
    </div> 
    
      
<script>
$(document).ready(function(){
    $('#example').dataTable( {
    "iDisplayLength": 1,
    "bLengthChange": false,
    "bFilter": false,
    "ordering": false,
    "pagingType": "simple",
    "language": {
        "sInfo": " ",
        "paginate": {
          "previous": "<<",
          "next": ">>"
        }    
    }
  } );
});
</script>
         
          <script  type="text/javascript" src="../js/dibujar.js"></script>
</body>
</html>
